<template>
  <div>
    <el-table :data="orders" :header-cell-style="{ background: '#f5f7fa' }" :default-sort="{prop: 'createTime', order: 'descending'}">
      <el-table-column :show-overflow-tooltip="true" prop="orderSn" label="订单编号" width="180"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="memberUsername" label="用户名" width="80"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="deleteStatus" label="订单数" width="100"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="payAmount" label="支付金额" width="100"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="status" label="订单状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="deliveryCompany" label="物流公司" width="100"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="deliverySn" label="物流单号" width="180"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="receiverName" label="收货人姓名" width="120"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="receiverPhone" label="收货人电话" width="150"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="receiverDetailAddress" label="收货地址" width="100"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" fixed="right" label="操作" min-width="100">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="payOrder(row.id)">支付</el-button>
          <el-button link type="primary" size="small" @click="viewOrder(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomPage displayCenter">
      <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="total"
          :page-size="pagination.pageSize"
          :current-page="pagination.pageNum"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
      ></el-pagination>
    </div>

    <!-- 抽屉组件 -->
    <el-drawer
        title="订单详情"
        :visible.sync="drawerVisible"
        size="50%"
        :with-header="true"
        v-model="drawerVisible"
    >
      <div v-if="selectedOrder">
        <div v-for="(value, key) in selectedOrder" :key="key">
          <strong>{{ key }}:</strong> {{ value }}
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { listOrder } from '@/apis/order.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { delOrder, updateOrder } from '@/apis/order';

const orders = ref([]);
const total = ref(0);
const pagination = ref({
  pageNum: 1,
  pageSize: 12,
});

const drawerVisible = ref(false);
const selectedOrder = ref(null);

const fetchOrders = async () => {
  try {
    const params = {
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize,
    };
    const res = await listOrder(params);
    orders.value = res.rows;
    total.value = res.total;
  } catch (error) {
    ElMessage.error('获取订单数据失败');
  }
};

const handlePageChange = (pageNum) => {
  pagination.value.pageNum = pageNum;
  fetchOrders();
};

const handleSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize;
  fetchOrders();
};

onMounted(() => {
  fetchOrders();
});

const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '待付款';
    case 2:
      return '已付款';
    case 3:
      return '已发货';
    case 4:
      return '已完成';
    case 5:
      return '已关闭';
    default:
      return '未知';
  }
};

const getStatusType = (status) => {
  switch (status) {
    case 1:
      return 'warning';
    case 2:
      return 'success';
    case 3:
      return 'info';
    case 4:
      return 'success';
    case 5:
      return 'danger';
    default:
      return '';
  }
};

const payOrder = (id) => {
  ElMessageBox({
    title: '确认支付',
    message: '是否确认支付?',
    showCancelButton: true,
    confirmButtonText: '支付',
    cancelButtonText: '取消',
    beforeClose: async (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = 'Loading...';
        let data = { id: id };
        await updateOrder(data);
        instance.confirmButtonLoading = false;
        done();
        ElMessage.success('支付成功');
        fetchOrders(); // 重新获取订单数据
      } else {
        instance.cancelButtonLoading = true;
        instance.cancelButtonText = 'Loading...';
        await delOrder(id);
        instance.cancelButtonLoading = false;
        done();
        ElMessage.success('取消成功');
        fetchOrders(); // 重新获取订单数据
      }
    },
  });
};

const viewOrder = (order) => {
  selectedOrder.value = order;
  drawerVisible.value = true;
};
</script>

<style scoped>
.bottomPage {
  height: 12vh;
}
</style>
